<!--
 * @Author: YSM
 * @Description: 
 * @Date: 2022-09-02 16:12:56
 * @LastEditTime: 2022-09-02 16:15:52
 * @FilePath: \dcqc-pmsfl-web_1.0.6f:\杂物箱\技术\my_web_knowledge\html\文字竖排\write-mode竖排.html
-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #content1 {
            width: 900px;
            height: 200px;
            -webkit-writing-mode: vertical-rl;
            writing-mode: vertical-rl;
            padding-top: 40px;
            font-size: 16px;
        }

        #content2 {
            width: 900px;
            height: 200px;
            -webkit-writing-mode: vertical-lr;
            writing-mode: vertical-lr;
            padding-top: 40px;
            font-size: 16px;
        }
    </style>
</head>
<!-- 实现原理：
    writing-mode直译过来就是书写模式，
    它是为了控制文本布局而产生的，
    换句话说它就是用来实现文字竖排的，
    只不过文字竖排我们平时用的少，
    所以这个css属性也不常见，
    发现这个属性之前我还是在用一些其它方式（前两中方法）实现文字的竖排。
    writing-mode的属性比较多，详细请看MDN,文字竖排使用到的属性是writing-mode:vertical-rl从右向左竖排，
writing-mode:vertical-lr从左向右竖排
-->

<!-- 优缺点：
    优点：实现文字竖排的方式比较的方便和优雅
    缺点：语法比较多，而且有两套不同的规范（IE和css3）！
-->

<body>
    <div id="content1">
        <p style="letter-spacing:1em;font-size:20px;">水调歌头 </p>
        <p style="letter-spacing:.3em;font-size:18px;">苏 轼</p>
        <p>明月几时有</p>
        <p>把酒问青天</p>
        <p>不知天上宫阙</p>
        <p>今夕是何年</p>
        <p>我欲乘风归去</p>
        <p>惟恐琼楼玉宇</p>
        <p>高处不胜寒</p>
        <p>起舞弄清影</p>
        <p>何似在人间</p>
        <p> 转朱阁</p>
        <p>低绮户</p>
        <p>照无眠</p>
        <p>不应有恨</p>
        <p>何事长向别时圆</p>
        <p>人有悲欢离合</p>
        <p>月有阴晴圆缺</p>
        <p>此事古难全</p>
        <p>但愿人长久</p>
        <p>千里共蝉娟</p>
    </div>
    <hr>
    <div id="content2">
        <p style="letter-spacing:1em;font-size:20px;">水调歌头 </p>
        <p style="letter-spacing:.3em;font-size:18px;">苏 轼</p>
        <p>明月几时有</p>
        <p>把酒问青天</p>
        <p>不知天上宫阙</p>
        <p>今夕是何年</p>
        <p>我欲乘风归去</p>
        <p>惟恐琼楼玉宇</p>
        <p>高处不胜寒</p>
        <p>起舞弄清影</p>
        <p>何似在人间</p>
        <p> 转朱阁</p>
        <p>低绮户</p>
        <p>照无眠</p>
        <p>不应有恨</p>
        <p>何事长向别时圆</p>
        <p>人有悲欢离合</p>
        <p>月有阴晴圆缺</p>
        <p>此事古难全</p>
        <p>但愿人长久</p>
        <p>千里共蝉娟</p>
    </div>
</body>

</html>